<template>
    <div class="sentiment-total">
        <div id="div-right1">
            <div class="div-right-title">
                <div class="div-right-title-box">
                </div>
                今日舆情总数
            </div>
            <div class="div-right-tools">
                <div class="f-l">
                    <span class="sentiment-total-num" v-text="todaySum">
                      <span class="sentiment-total-text">条</span>
                    </span>
                    <span class="sentiment-total-change-text">环比增长
                        <span :class="[{'sentiment-total-up': increaseRate > 0},{'sentiment-total-down': increaseRate < 0}]" v-text="getIncreaseRate"></span>
                    </span>
                </div>
                <div class="div-right-time-tabs pointer f-r" title="今日舆情总数">
                  <div :class="{'tab-checked':isActive == 'M'}"
                       @click="TimeClick('M')"
                       class="div-right-time-tab f-r">本月</div>
                  <div :class="{'tab-checked':isActive == 'W'}"
                         @click="TimeClick('W')"
                         class="div-right-time-tab pointer f-r">本周</div>
                </div>
            </div>

            <div id="div-echarts-today-public-sentiment" class="div-right-content" style="height: 170px;margin-top:10%;">

            </div>

        </div>
    </div>
</template>

<script>
// 引入echarts
import echarts from 'echarts'

export default {
  name: 'sentimentTotal',
  data () {
    return {
      isActive: 'W', // 'M' | 'W'
      xAxisdata: [], // x
      seriesdata: [], // y
      todaySum: 0, // 今日条数
      increaseRate: 0 // 环比增长
    }
  },
  mounted () {
    this.init()
  },
  computed: {
    getIncreaseRate () {
      if (this.increaseRate > 0) {
        return (Math.round(this.increaseRate * 10000) / 100).toFixed(2) + '%'
      } else if (this.increaseRate < 0) {
        return (Math.round(this.increaseRate * 10000) / 100).toFixed(2) + '%'
      } else {
        return this.increaseRate
      }
    }
  },
  methods: {
    init () {
      this.getEchartsData()
    },
    // 表格请求
    getEchartsData () {
      let stationId = '9BECB65D-4E52-4039-993B-369DAA145EAF' // 市局
      // let stationId = 'FD705A32-B305-4F76-87B0-55908993B6F9' // 分局
      this.$axios({
        url: this.Monitor +
          '/monitorStatistics/todayPublicSentimentTotal/' +
          this.isActive + '/' + stationId,
        method: 'get'
      }).then(res => {
        let xAxisdata = []
        let seriesdata = []
        let todaySum = res.data.data.todaySum
        let increaseRate = res.data.data.increaseRate
        this.todaySum = todaySum
        this.increaseRate = increaseRate
        res.data.data.pubDate.map(item => {
          // "2018-12-05"
          xAxisdata.push(item.date.slice(5))
          seriesdata.push(item.num)
        })
        this.xAxisdata = xAxisdata.reverse()
        this.seriesdata = seriesdata.reverse()
        this.drawEcharts()
      }).catch(err => {
        console.log(err, '今日舆情总数')
      })
    },
    drawEcharts () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('div-echarts-today-public-sentiment'))
      // option
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#ddd'
            }
          },
          backgroundColor: 'rgba(255,255,255,1)',
          //      padding: [5, 10],
          textStyle: {
            color: '#7588E4'
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        xAxis: {
          type: 'category',
          data: this.xAxisdata,
          boundaryGap: false,
          splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
              color: '#026CC4',
              opacity: 0.5
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#609ee9'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#026CC4',
              opacity: 0.5
            }
          },
          axisTick: {
            show: false
          },

          axisLabel: {
            // 纵坐标 数字标识
            show: false
          }
        },
        series: [
          {
            name: '舆情总数',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: this.seriesdata,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#116E93'
                    },
                    {
                      offset: 1,
                      color: '#116E93'
                    }
                  ],
                  false
                )
              }
            },
            itemStyle: {
              normal: {
                color: '#36E2B7' // 折线颜色
              }
            },
            lineStyle: {
              normal: {
                width: 3
              }
            }
          }
        ]
      }
      myChart.setOption(option)
      // 根据窗口的大小变动图表
      window.onresize = function () {
        myChart.resize()
      }
    },
    // 周和月的切换
    TimeClick (str) {
      this.isActive = str
      this.getEchartsData()
    }
  }
}
</script>

<style scoped>

</style>
